<template>
	<view class="form">
		<form @submit="formSubmit">
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class='item acea-row'>
						<view class="item-label-line label-require">分类</view>
						<view class="cate-item" :class="{curr:formData.cate_id.indexOf(item.id)!=-1}"
							@click="selectCate(item.id)" v-for="(item,index) in cateList" :key="item.id">
							{{item.cate_name}}
						</view>
					</view>
					<view class='item acea-row'>
						<view class="item-label-line">工序</view>
						<view class="cate-item" :class="{curr:formData.m_type_id == item.id}"
							@click="selectMTtype(item.id)" v-for="(item,index) in mTypeList" :key="item.id">
							{{item.title}}
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>封面图片<text class="label-desc">（默认使用用商品图片首图)</text></view>
						<view class="avatar-box cover" v-if="!formData.image" @click.stop='uploadpic'>
							<text class='iconfont icon-icon25201'></text>
							<view>上传封面</view>
						</view>
						<view class="avatar-box" v-else @click.stop='uploadpic'>
							<image :src="formData.image||''" mode="aspectFill"></image>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class="label-require">标题</view>
						<textarea class="store-name" placeholder-class='placeholder' placeholder="填写标题，20字以内"
							name="store_name" v-model="formData.store_name" :maxlength="20">
						</textarea>
					</view>
					<!-- 					<view class='item acea-row row-between-wrapper'>
						<view>短标题</view>
						<view class='input'><input type='text' name='short_title' :maxlength="10" placeholder="请填写，10字以内" placeholder-class='placeholder' v-model='formData.short_title'></input>
						</view>
					</view> -->
					<view class='item' v-show="'3'.indexOf(formData.cate_id) !== -1">
						<view>下载地址</view>
						<textarea class="store-info" maxlength="500" placeholder-class='placeholder'
							placeholder="填写下载地址，500字以内" name="download" v-model="formData.download" :maxlength="1024">
						</textarea>

					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>销售价格</view>
						<view class='input'><input type='number' name='price' :maxlength="10"
								v-model='formData.price'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>市场价格</view>
						<view class='input'><input type='number' name='ot_price' :maxlength="10"
								v-model='formData.ot_price'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-show="'1,2'.indexOf(formData.cate_id) !== -1">
						<view>库存</view>
						<view class='input'><input type='number' name='stock' :maxlength="10"
								v-model='formData.stock'></input>
						</view>
					</view>
					<view class='item'>
						<view>商品图片<text class="label-desc">（最多可上传8张图片)</text></view>
						<view class='list acea-row row-middle'>
							<view class='pictrue' v-for="(item,index) in formData.slider_image" :key="index">
								<image :src='item'></image>
								<text class='iconfont icon-guanbi1 font-num' @click='delPic(index)'></text>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpics'
								v-if="formData.slider_image.length < 8">
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t(`上传图片`)}}</view>
							</view>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>生产厂家</view>
						<textarea class="store-name" placeholder-class='placeholder' placeholder="请填写，100字以内"
							name="factory_name" v-model="formData.factory_name" :maxlength="100">
						</textarea>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>设备型号</view>
						<view class='input'><input type='text' name='model' :maxlength="32" placeholder="请填写，32字以内"
								placeholder-class='placeholder' v-model='formData.model'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-show="'3,8'.indexOf(formData.cate_id) == -1">
						<view>配置</view>
						<textarea class="store-name" placeholder-class='placeholder' placeholder="请填写，100字以内"
							name="intro" v-model="formData.intro" :maxlength="100">
						</textarea>
					</view>
					<view class='item acea-row row-between-wrapper'
						v-show="'1,3,4,5,6,8'.indexOf(formData.cate_id) == -1">
						<view>件号</view>
						<view class='input'><input type='text' name='piece_no' :maxlength="32" placeholder="请填写，32字以内"
								placeholder-class='placeholder' v-model='formData.piece_no'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'
						v-show="'1,3,4,5,6,8'.indexOf(formData.cate_id) == -1">
						<view>规格</view>
						<view class='input'><input type='text' name='spec' :maxlength="32" placeholder="请填写，32字以内"
								placeholder-class='placeholder' v-model='formData.spec'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-show="'3,8'.indexOf(formData.cate_id) == -1">
						<view>发货地址</view>
						<!-- 						<textarea class="store-name" placeholder-class='placeholder' placeholder="请填写，200字以内"
							name="from_addr" v-model="formData.factory_name" :maxlength="200">
						</textarea> -->
						<view class="address">
							<picker mode="multiSelector" @change="bindRegionChange"
								@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
								<view class='acea-row'>
									<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
									<view class='iconfont icon-dizhi fontcolor'></view>
								</view>
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-show="'3,4,5,8'.indexOf(formData.cate_id) == -1">
						<view>生产日期</view>
						<view class='input'>
							<!-- <uni-datetime-picker v-model="formData.made_at" fields="month" type="date" :border="false" /> -->
							<picker mode="date" @change="madeAtChange" fields="month">
								{{formData.made_at?formData.made_at:'选择日期'}}
							</picker>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-show="'3,4,5,8'.indexOf(formData.cate_id) == -1">
						<view>成色</view>
						<view class='input'>
							<picker @change="wearChange" v-model="currWearIndex" :range="wearList">
								<view class="uni-input">{{wearList[currWearIndex]}}</view>
							</picker>
							<!-- <input type='text' name='wear' :maxlength="32" v-model='formData.wear'></input> -->
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>是否议价</view>
						<!-- 						<view class='input'>
							<input type='text' name='is_price' :maxlength="32" v-model='formData.is_price'></input>
						</view> -->
						<view class='default acea-row row-middle' @click='isPriceChange'>
							<checkbox-group>
								<checkbox :checked="formData.is_price ? true : false" />是否允许议价
							</checkbox-group>
						</view>
					</view>
					<view class='item'>
						<view>描述</view>
						<textarea class="store-info" placeholder-class='placeholder' placeholder="填写描述，1024字以内"
							name="store_info" v-model="formData.store_info" :maxlength="1024">
						</textarea>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>联系人</view>
						<view class='input'><input type='text' name='link_name' :maxlength="20" placeholder="请填写，20字以内"
								placeholder-class='placeholder' v-model='formData.link_name'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>联系电话</view>
						<view class='input'><input type='text' name='link_phone' :maxlength="20" placeholder="请填写，20字以内"
								placeholder-class='placeholder' v-model='formData.link_phone'></input>
						</view>
					</view>

					<view class='item'>
						<view>售后描述</view>
						<textarea class="store-info" placeholder-class='placeholder' placeholder="填写售后描述，500字以内"
							name="service_desc" v-model="formData.service_desc" :maxlength="500">
						</textarea>
					</view>

				</view>


				<button class='modifyBnt bg-color' formType="submit">保存并上架</button>
				<!-- #ifdef H5 || APP-PLUS || MP -->
				<view class="logOut cartcolor acea-row row-center-wrapper" @click="back">返回上页</view>
				<!-- #endif -->
			</view>
		</form>

		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
		<home></home>
	</view>
</template>

<script>
	let that;
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		uploadsFiles
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import colors from '@/mixins/color.js';
	import tool from '@/extend/tool.js';
	export default {
		components: {
			home
		},
		mixins: [colors],
		data() {
			return {
				cid: 0, // 商品分类
				id: 0, // 宝贝id
				loginType: 'h5', //app.globalData.loginType
				canvasWidth: "",
				canvasHeight: "",
				canvasStatus: false,
				formData: {
					id: 0,
					cate_id: [7],
					m_type_id: 0,
					store_name: "",
					short_title: "",
					download: "",
					image: "",
					price: "1.00",
					ot_price: "2.00",
					stock: 100,
					slider_image: [],
					store_info: "",
					factory_name: "",
					model: "",
					intro: "",
					piece_no: "",
					spec: "",
					from_addr: "",
					made_at: "",
					wear: 10,
					is_price: 0,
					link_name: "",
					link_phone: "",
					uids: "",
					file_json: []
				},
				inputTrip: true,
				focus: true,
				cateList: [],
				mTypeList: [],
				wearList: ['一成', '二成', '三成', '四成', '五成', '六成', '七成', '八成', '九成', '全新'],
				currWearIndex: 9,
				region: [`省`, `市`, `区`],
				valueRegion: [0, 0, 0],
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
				cityId: 0,
				isSubmited: false
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad(opts) {
			that = this;
			that.cid = +opts.cid || 0;
			that.id = opts.id || 0;
			if (that.id) that.$tool.setNavTitle("编辑宝贝");
			else that.$tool.setNavTitle("添加宝贝");
			if (that.isLogin) {
				that.getInitDataDraftForm();
				if (that.id) {
					that.getDraftDetail();
				} else {
					that.formData.cate_id = [this.cid];
				}
				this.getCityList();
			} else {
				toLogin();
			}
		},
		onReady() {},
		methods: {
			getInitDataDraftForm() {
				this.$http.get("v1/getInitDataDraftForm").then(res => {
					this.cateList = res.data.cateList;
					this.mTypeList = res.data.mTypeList;
				})
			},
			getDraftDetail() {
				that.$http.get("v1/getDraftDetail/" + that.id).then(res => {
					that.formData = res.data.draft;
					this.region = that.formData.from_addr.split(",");
					this.currWearIndex = that.formData.wear - 1;
					// that.slider_image = that.formData.slider_image;
				});
			},
			getCityList() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize() {
				let that = this,
					province = [],
					city = [],
					area = [];
				let cityChildren = that.district[0].c || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
				that.district.forEach((item, i) => {
					province.push(item.n);
					if (item.n === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});
				that.district[this.valueRegion[0]].c.forEach((item, i) => {
					if (this.region[1] == item.c) {
						this.valueRegion[1] = i
						this.multiIndex[1] = i
					}
					city.push(item.n);
				});
				that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
					if (this.region[2] == item.c) {
						this.valueRegion[2] = i
						this.multiIndex[2] = i
					}
					area.push(item.n);
				});
				this.multiArray = [province, city, area]

			},
			madeAtChange({
				detail
			}) {
				that.formData.made_at = detail.value;
			},
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						c: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
						multiArray[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif



				this.multiIndex = multiIndex
				// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
			},
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						c: []
					},
					city = province.c[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;

				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.formData.from_addr = this.region.join(',');
				this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			isPriceChange() {
				this.$set(this.formData, 'is_price', !this.formData.is_price);
			},
			wearChange({
				detail
			}) {
				this.currWearIndex = detail.value;
				this.formData.wear = detail.value + 1;
			},
			selectMTtype(typeId) {
				return that.formData.m_type_id = typeId;
			},
			selectCate(cid) {
				// 只能选择一个分类
				return that.formData.cate_id = [cid];
				// 以下是支持多分类
				let index = that.formData.cate_id.indexOf(cid);
				if (index != -1) {
					for (let i = 0, len = that.formData.cate_id.length; i < len; i++) {
						if (cid == that.formData.cate_id[i]) that.formData.cate_id.splice(index, 1);
					}
				} else that.formData.cate_id.push(cid);
			},
			// 删除图片
			delPic: function(index) {
				let pic = that.formData.slider_image[index];
				that.formData.slider_image.splice(index, 1);
				that.$set(that.formData, 'slider_image', that.formData.slider_image);
			},
			// bindHideKeyboard(e){
			// 	that.formData.store_info = e.detail.value;
			// },
			// 提交修改
			formSubmit: tool.debounce(({
				detail
			}) => {
				if (that.isSubmited) return that.$tool.tip("已保存成功");;
				if (!that.validateForm(detail.value)) return false;
				that.saveDraftAndPublish();
			}),
			saveDraftAndPublish() {
				that.$http.post("v1/saveDraftAndPublish", that.formData).then(res => {
					that.isSubmited = true;
					that.$tool.alert(res.msg, () => {
						that.back();
					});
				}).catch(err => {
					that.$tool.tip(err || "系统错误");
				});

				return false;
				let value = detail.value,
					userInfo = that.switchUserInfo[that.userIndex];
				if (!value.nickname) return that.$util.Tips({
					title: that.$t(`请输入姓名`)
				});
				value.avatar = this.userInfo.avatar;
				userEdit(value).then(res => {
					return that.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(msg => {
					return that.$util.Tips({
						title: msg || that.$t(`保存失败`)
					}, {
						tab: 3,
						url: 1
					});
				});
			},
			validateForm(data) {
				if (that.formData.cate_id.length == 0) return that.$tool.tip("请选择分类");

				// if(!that.formData.image && that.formData.slider_image.length > 0){
				// 	that.formData.image = that.formData.slider_image[0];
				// }else if(!that.formData.image && that.formData.slider_image.length == 0){
				// 	return that.$tool.tip("请选择封面图片或上传一张商品图片");
				// }
				if (!that.formData.store_name) return that.$tool.tip("请输入标题");
				if (!that.$tool.isNumber(that.formData.price)) return that.$tool.tip("请输入宝贝价格");


				// if(that.formData.slider_image){
				// 	that.formData.slider_image = that.slider_image;
				// }
				return true;
			},

			// 上传文件
			uploadpic: function() {
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					that.formData.image = res.data.url;
					// that.$set(that, 'formData', that.switchUserInfo);
					this.canvasStatus = false
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			uploadpics: function() {
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', function(res) {
					that.formData.slider_image.push(res.data.url);
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},

			uploadFiles: function() {
				console.log('000000');
				uni.chooseMessageFile({
					count: 8,
					type: "all", // 文件类型，支持 'image' / 'video' / 'all'
					success: res => {
						console.log('成功', res);
						const selectedFiles = res.tempFiles.map((file) => ({
							name: file.name || "未知文件名",
							path: file.path,
						}));
						this.files = [...this.files, ...selectedFiles];
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.apiUrl + 'api/uploadFile', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									file: tempFilePaths[i],
									type: '1'
								},
								success: res => {
									console.log(res);
									uni.hideLoading()
									// this.picArr.concat(JSON.parse(res.data).entity)
									let data1 = this.picArr.concat(JSON.parse(res.data).data
										.url)
									// let data1 = JSON.parse(res.data)
									console.log(data1);
									this.picArr = data1
									console.log(this.picArr);

								}
							});
						}
					},
					fail: (err) => {
						console.error("文件选择失败：", err);
					},

				});
			},

			// 返回上页
			back() {
				that.$tool.back();
				// that.$tool.navto("/pages/other/draft/draft_list");
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .form{
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
	.require {
		color: $uni-color-error;
	}

	.fontcolor {
		color: var(--view-theme);
	}

	.cartcolor {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}

	.personal-data {
		padding-bottom: 50rpx;
		padding-bottom: calc(50rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	/deep/ .uni-input-input {
		font-size: 28rpx;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: #e93323;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid #e93323;
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #282828;

		// .cate-list{
		// 	display: flex;
		// 	width: 80%;
		// 	padding-top: 20rpx;
		// 	white-space: pre-wrap;
		.label-desc {
			font-size: 0.8em;
			color: #ccc;
		}

		.label-require {
			&:before {
				content: "*";
				color: $uni-color-error;
			}
		}

		.item-label-line {
			width: 100%;
			padding-bottom: 14rpx;
		}

		.cate-item {
			flex-shrink: 0;
			padding: 5rpx 10rpx;
			color: #282828;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			border: 1px solid #282828;
			border-radius: 10rpx;

			&.curr {
				color: #fff;
				background-color: var(--view-theme);
				border: 1px solid var(--view-theme); //#e93323
			}
		}

		.mark {
			// background-color: #f9f9f9;
			// width: 345px;
			min-height: 70px;
			border-radius: 1px;
			margin-top: 15px;
			// padding: 12px 14px;
			color: #ccc;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.mark-msg {
			color: #333;
			font-size: 28rpx;
		}

		.store-info,
		.store-name {
			background-color: #f9f9f9;
			width: 100%;
			height: 200rpx;
			border-radius: 3rpx;
			margin-top: 30rpx;
			padding: 25rpx 28rpx;
			font-size: 28rpx;
			box-sizing: border-box;
		}

		.store-name {
			height: 120rpx;
		}

		.placeholder {
			color: #ccc;
			font-size: 28rpx;
		}

		.list {
			.pictrue {
				width: 140rpx;
				height: 140rpx;
				margin: 0 0 35rpx 25rpx;
				position: relative;
				font-size: 22rpx;
				color: #bbb;
				position: relative;

				&:nth-last-child(1) {
					border: 1rpx solid #ddd;
					box-sizing: border-box;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 3rpx;
				}

				.icon-guanbi1 {
					font-size: 45rpx;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}

				.icon-icon25201 {
					color: #bfbfbf;
					font-size: 50rpx;
				}
			}
		}
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		flex: 1;
		text-align: right;
		color: #868686;
		font-size: 28rpx;

		input {
			padding-right: 10rpx;
		}

		.icon-suozi {
			margin-left: 10rpx;
		}
	}

	.personal-data .list .item .input .id {
		// width: 180rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 24rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}

	.avatar-box {
		width: 96rpx;
		height: 96rpx;
		border: 1px solid #ddd;

		image {
			width: 100%;
			height: 100%;
			// border-radius: 10rpx;
		}

		&.cover {
			color: #bbb;
			font-size: 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
</style>